<!-- 实验项目选择 -->
<template>
  <div id="dialog-container">
    <el-button type="primary" plain size="small" @click="add">新增检测项目</el-button>
    <el-dialog v-dialogDrag :title="'选择检测项目操作提示'" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="750px">
      <el-form :model="formData" :inline="true" size="small">
        <el-form-item label="检测项目名称：">
          <el-input v-model="formData.fieldName"></el-input>
        </el-form-item>
        <el-form-item label="检测项目类型：">
          <el-select v-model="formData.testType" filterable placeholder="请选择" style="width: 200px;">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="typeStr" label="检测项目类型" width="" align="center"></el-table-column>
        <el-table-column prop="fieldName" label="项目名称" width="" align="center"></el-table-column>
        <el-table-column prop="standard" label="标尺/技术要求" width="" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getPartFieldList,
    getTypeList
  } from "../../../service/task";
  import {
    getLableFromList
  } from "../../../utils/common";
  export default {
    data() {
      return {
        dialogVisible: false,
        formData: {
          testType: "",
          fieldName: ""
        },
        tableData: [],
        selectVal: [],
        typeList: []
      };
    },
    methods: {
      handleSelectionChange(val) {
        // for(let i = 0; i < val.length; i++) {
        //   this.selectVal.push({'name': val[i].field_name, 'id': val[i].id});
        // }
        this.selectVal = val;
      },

      add() {
        getTypeList().then(res => {
          this.typeList = res.data.result;
          this.formData.testType = "";
          this.formData.fieldName = "";
          this.dialogVisible = true;
          this.loadData();
        });

      },

      // 新增
      loadData() {
        if (this.dialogVisible) {
          let that = this;
          let typeList = this.typeList;
          getPartFieldList(this.formData).then(res => {
            if(res.data.result) {
                that.tableData = res.data.result.content;
            } else {
              that.tableData = [];
            }
            for (let i = 0; i < that.tableData.length; i++) {

              that.tableData[i].typeStr = getLableFromList(
                that.typeList,
                that.tableData[i].testType
              );
            }
          });
        }
      },
      // 确定
      submit() {
        // let trans = this.selectVal.join(",");
        // console.log(this.selectVal)
        this.$emit("testPros", this.selectVal);
        this.dialogVisible = false;
      }
    },
    mounted() {

    }
  };
</script>
